How to show the Correct Payment method on WooCommerce Subscriptions

If you or your clients are using WooCommerce Subscriptions, you may want to show the correct payment method in the list of available payment methods.

By default, the currently set payment method will show above the list of payments. This is fine if you never changed the default layout. Personally, I always looked at the available payment methods and was confused when I show a different payment method selected.

This is not a huge problem if you list the currently used payment method by the subscription (although I was still confused). But if the layout was changed and the currently used payment method is not display in the Subscription payment screen, then you’ll have a really bad user experience.

In this tutorial, I will show you how you can easily change the list of available payment methods to show the currently set payment method for that subscription.

Create a Plugin

Let’s create a plugin for the WooCommerce Subscriptions Correct Payment Method. Go to the plugins folder and create a new folder. I will name it wc-show-subscription-payment. Then, inside of that folder, create a new php file with the same name wc-show-subscription-payment.php.

Now add this code into it that file:

Now, go to the Plugins screen in the admin side of your site and activate our new plugin. For now, the WooCommerce Subscription will still show the incorrect payment method (the default one).

Filtering the HTML for WooCommerce Payment Tokens

Saved payment methods are actually payment tokens. If a payment gateway supports tokens, your customers will be able to save their payment methods.

The HTML for payment tokens always selects the default saved payment method. So, we will have to filter this HTML and select the payment method of the current WooCommerce Subscription. Let’s add the filter now:

For each payment method, we are returning the HTML. The $token is a WC_Token object. Each token object will get us the gateway ID. That way we can define how to retrieve tokens from WooCommerce Subscriptions. We will do that with the method get_selected_token.

Let’s define that method now.

Retrieving the saved token in a WooCommerce Subscription

Each payment gateway defines how the token will be saved. Usually, the token is an encrypted string and it is saved by a meta key. This meta key can’t be retrieved by a common method (at least I did not find one). So we will create a way to retrieve such tokens from the current WooCommerce Subscription for any gateway.

When we are viewing the screen for changing the Payment Method for a WooCommerce Subscription, we will have a query string change_payment_method. This parameter will contain the ID of the Subscription we are viewing.

In this tutorial, I was using the Stripe payment gateway, but you can add any other payment gateway inside of method get_token_from.

Now, if we view the same screen as above, we will get the correct payment method selected:

The Code

You can download the complete plugin here and use it how you want it.

Conclusion

WooCommerce Subscriptions is a great plugin for selling subscription-based products. With the WordPress Plugin API (filters and actions) they have made it possible to customize all Subscription screens how we want it.

Have you ever customized the user experience of WooCommerce Subscription or any other part? Let others know in the comments below.

Special thanks to Grow Development that provides with challenging projects. This would not be written if I was not working on a complex project.

Sponsored By

Become a Sponsor